<template>
  <div class="detail">
    <detail-nav-bar
      class="detailnavbar"
      @goto="goto"
      ref="navbar"
    ></detail-nav-bar>
    <common-scroll
      class="content"
      ref="scroll"
      @getPosition="watchscroll"
      :probe-type="3"
    >
      <common-swiper :padding-bottom="'80%'" :banner="banner" />
      <detail-info :goods="goods"></detail-info>
      <detail-shop :shop="shop"></detail-shop>
      <!-- 商品图片 -->
      <detail-goods-info
        :goodsImage="goodsImage"
        @imageload="imageload"
      ></detail-goods-info>
      <!-- 商品参数 -->
      <detail-item-params
        :itemParams="itemParams"
        ref="params"
      ></detail-item-params>
      <!-- 商品评论 -->
      <detail-comment-info ref="comment" :comment-info="commentInfo" />
      <!-- 相关推荐 -->
      <goods-list ref="goods" :list="recommendInfo" />
    </common-scroll>
    <detail-bottom-bar :product="product" />
    <back-top @backtop="backTop" v-show="isShowTop"></back-top>
  </div>
</template>
<script>
import DetailNavBar from "./detailComps/DetailNavBar";

import DetailInfo from "./detailComps/DetailInfo";
import DetailShop from "./detailComps/DetailShop";
import DetailGoodsInfo from "./detailComps/DetailGoodsInfo";
import DetailItemParams from "./detailComps/DetailItemParams";
import DetailBottomBar from "./detailComps/BottomBar";
import DetailCommentInfo from "./detailComps/DetailCommentInfo";

import GoodsList from "components/content/goodslist/GoodsList";

import {
  DetailRequest,
  Goods,
  Params,
  reqRecommends,
  CommentInfo
} from "network/detail.js";

import { backTopMixin } from "utils/mixins";

export default {
  name: "Detail",
  data() {
    return {
      iid: this.$route.params.iid,
      banner: [],
      goods: {},
      shop: {},
      goodsImage: {},
      itemParams: {},
      isShowTop: false,
      recommendInfo: [],
      commentInfo: {},
      product: {},
      top: [0],
      index: 0
    };
  },
  mixins: [backTopMixin],

  created() {
    this.getDetailInfo();
    //推荐商品
    this.getRecommends();
  },
  mounted() {},
  components: {
    DetailNavBar,
    DetailInfo,
    DetailShop,
    DetailGoodsInfo,
    DetailItemParams,
    DetailCommentInfo,
    DetailBottomBar,
    GoodsList
  },
  methods: {
    // 点击tarbar时，进行滚动条的跳转
    goto(index) {
      this.$refs.scroll.scrollTo(0, -this.top[index], 0);
    },
    // 图片加载完成
    imageload() {
      this.$refs.scroll.refresh();
      this.top.push(this.$refs.params.$el.getBoundingClientRect().top - 44);
      this.top.push(this.$refs.comment.$el.getBoundingClientRect().top - 44);
      this.top.push(this.$refs.goods.$el.getBoundingClientRect().top - 44);
    },
    // 监测滚动条的滚动高度
    watchscroll(position) {
      this.isShowTop = -position.y > 1000;
      // 对滚动距离进行判断，并对tarbar进行切换
      if (0 <= -position.y && -position.y < this.top[1]) {
        this.index = 0;
      } else if (-position.y >= this.top[1] && -position.y < this.top[2]) {
        this.index = 1;
      } else if (-position.y >= this.top[2] && -position.y < this.top[3]) {
        this.index = 2;
      } else if (-position.y >= this.top[3]) {
        this.index = 3;
      }
      this.$refs.navbar.currentindex = this.index;
    },

    async getDetailInfo() {
      const res = await DetailRequest(this.iid);
      var result = res.data.result;
      //banner图
      this.banner = result.itemInfo.topImages;

      this.goods = new Goods(
        result.itemInfo,
        result.columns,
        result.shopInfo.services
      );
      this.product = {
        title: this.goods.title,
        desc: this.goods.desc,
        price: this.goods.realPrice,
        image: this.banner[0],
        iid: this.iid
      };
      this.shop = result.shopInfo;
      this.goodsImage = result.detailInfo.detailImage[0];
      this.itemParams = new Params(
        result.itemParams.info,
        result.itemParams.rule
      );
      //评论信息
      if (result.rate.cRate !== 0) {
        this.commentInfo = new CommentInfo(result.rate.list[0]);
      }
    },

    async getRecommends() {
      const result = await reqRecommends();
      //获取推荐的图片数据
      const list = result.data.data.list.slice(0, 10);
      this.recommendInfo = list.map(item => {
        return {
          show: {
            img: item.image
          },
          title: item.title,
          price: item.price,
          fav: item.cfav
        };
      });
    }
  }
};
</script>
<style lang="css" scoped>
.detail {
  position: relative;
  z-index: 9;
  background: white;
  height: calc(100vh - 58px);
}
.detailnavbar {
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 9;
  background: white;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
}
.content {
  position: absolute;
  top: 44px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  overflow: hidden;
}
</style>
